<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-button @click="resetNameFilter">清除项目名称过滤器</el-button>
        <el-button @click="clearFilter">清除所有过滤器</el-button>
        <!-- <div style="display:inline">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="svalue"
            size="medium"
            
          >
          </el-input>
        </div> -->
      </el-col>
    </el-row>
    <el-table
      ref="filterTable"
      :data="getPerPageData()"
      style="width: 100%"
      @row-click="handleRowClick"
      >>
      <el-table-column
        prop="name"
        label="项目名称"
        sortable
        fixed
        width="150"
        column-key="name"
        :filters="getFilters('name')"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column prop="status" label="项目状态" width="150">
      </el-table-column>
      <el-table-column prop="pfuel" label="吨汽耗燃料Nm3" width="150">
      </el-table-column>
      <el-table-column prop="electric" label="吨汽耗电(kW·h)" width="150">
      </el-table-column>
      <el-table-column prop="water" label="吨汽耗水(T)" width="150">
      </el-table-column>
      <el-table-column prop="gas" label="产气量(T)" width="150">
      </el-table-column>
      <el-table-column prop="fuel" label="耗燃料Nm3" width="150">
      </el-table-column>
      <el-table-column prop="nelectric" label="总耗电量(kW·h)" width="150">
      </el-table-column>
      <el-table-column prop="client" label="客户名称" width="150">
      </el-table-column>
      <el-table-column
        prop="time"
        label="项目创建时间"
        width="150"
      ></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import table from "../../components/clients/table";
export default {
  components: {
    // table,
  },
  computed: {
    getTableData(){
      return 
    }
  },
  data() {
    return {
      currentPage: 1,
      limit: 10,
      svalue: "",
      form: {
        code: "",
        key: "",
      },
      dialogFormVisible: false,
      tableData: [
        {
          name: "test123",
          status: "",
          pfuel: "",
          electric: "",
          water: "",
          gas: "",
          fuel: "",
          nelectric: "",
          client: "客户01",
          time: "2021-04-10 20:00",
          details: {},
        },
        {
          name: "125设备组",
          status: "",
          pfuel: "",
          electric: "",
          water: "",
          gas: "",
          fuel: "",
          nelectric: "",
          client: "周超",
          time: "2021-04-10 20:00",
        },
        {
          name: "demo电站",
          status: "",
          pfuel: "1",
          electric: "298",
          water: "400",
          gas: "3/4",
          fuel: "",
          nelectric: "",
          client: "锅炉客户",
          time: "2021-04-10 20:00",
        },
        {
          name: "气站演示项目",
          status: "",
          pfuel: "1",
          electric: "0.0906",
          water: "0.6242",
          gas: "2436272",
          fuel: "",
          nelectric: "",
          client: "压缩机客户",
          time: "2021-04-10 20:00",
        },
        {
          name: "test123",
          status: "",
          pfuel: "",
          electric: "",
          water: "",
          gas: "",
          fuel: "",
          nelectric: "",
          client: "客户01",
          time: "2021-04-10 20:00",
          details: {},
        },
        {
          name: "125设备组",
          status: "",
          pfuel: "",
          electric: "",
          water: "",
          gas: "",
          fuel: "",
          nelectric: "",
          client: "周超",
          time: "2021-04-10 20:00",
        },
        {
          name: "demo电站",
          status: "",
          pfuel: "1",
          electric: "298",
          water: "400",
          gas: "3/4",
          fuel: "",
          nelectric: "",
          client: "锅炉客户",
          time: "2021-04-10 20:00",
        },
        {
          name: "气站演示项目",
          status: "",
          pfuel: "1",
          electric: "0.0906",
          water: "0.6242",
          gas: "2436272",
          fuel: "",
          nelectric: "",
          client: "压缩机客户",
          time: "2021-04-10 20:00",
        },
        {
          name: "test123",
          status: "",
          pfuel: "",
          electric: "",
          water: "",
          gas: "",
          fuel: "",
          nelectric: "",
          client: "客户01",
          time: "2021-04-10 20:00",
          details: {},
        },
        {
          name: "125设备组",
          status: "",
          pfuel: "",
          electric: "",
          water: "",
          gas: "",
          fuel: "",
          nelectric: "",
          client: "周超",
          time: "2021-04-10 20:00",
        },
        {
          name: "demo电站",
          status: "",
          pfuel: "1",
          electric: "298",
          water: "400",
          gas: "3/4",
          fuel: "",
          nelectric: "",
          client: "锅炉客户",
          time: "2021-04-10 20:00",
        },
        {
          name: "气站演示项目",
          status: "",
          pfuel: "1",
          electric: "0.0906",
          water: "0.6242",
          gas: "2436272",
          fuel: "",
          nelectric: "",
          client: "压缩机客户",
          time: "2021-04-10 20:00",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    resetNameFilter() {
      this.$refs.filterTable.clearFilter("name");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.tableData.splice(index, 1);
    },
    deleteRows() {
      for (let i of this.multipleSelection) {
        for (let j in this.tableData) {
          if (i.code == this.tableData[j].code) {
            this.tableData.splice(j, 1);
          }
        }
      }
    },
    getFilters(key) {
      let arr = [];
      for (let i of this.tableData) {
        arr.push({
          text: i[key],
          value: i[key],
        });
      }
      return arr;
    },
    handleRowClick(row, column, event) {
      // console.log(row,column)
      this.$router.push({
        path: "/projectlist/details",
        // name: 'mallList',
        // query: {
        //   code: row,
        // },
      });
    },
    getPerPageData(){
      let limit =  this.$data.limit
      let page = this.$data.currentPage
      return this.tableData.slice((page - 1) * limit, (page - 1) * limit + limit);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$data.limit = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.currentPage = val
    },
  },
};
</script>

<style scoped>
.block{
  text-align: center;
}
</style>